<template>
	<view class="uni-steps">
		<scroll-view scroll-x="true" class="lists flex justify-start align-center">
			<view class="item" v-for="(item,index) in options" :key="index">
				<view class="flex flex-direction align-center" :class="{cur:index == active}">
					<text>+{{item.title}}</text>
					<image style="width: 50rpx;height: 50rpx;" src="/static/images/user/icon/m1.png" mode="widthFix"></image>
					<text class="iconfont icon-31xuanzhong" v-if="index<active"></text>
				</view>
				<text :style="{color:index<=active?activeColor:deactiveColor}" >第{{item.title}}天</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'WanlSteps',
		props: {
			activeColor: {
				// 激活状态颜色
				type: String,
				default: '#4CBD66'
			},
			deactiveColor: {
				// 未激活状态颜色
				type: String,
				default: '#888888'
			},
			active: {
				// 当前步骤
				type: Number,
				default: 0
			},
			options: {
				type: Array,
				default () {
					return []
				}
			} ,// 数据
			last: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="less" scoped>
	.uni-steps {
		overflow: hidden;
		margin: 34rpx 0 24rpx 0;
	}
	.lists {
		padding: 0 36rpx;
		white-space: nowrap;
		.item {
			margin-right: 36rpx;
			display: inline-flex;
			flex-direction: column;
			&:last-child {
				margin-right: 0;
			}
			> view {
				width: 94rpx;
				height: 132rpx;
				background: #E9F4EB;
				border-radius: 10rpx;
				justify-content: center;
				position: relative;
				.iconfont {
					position: absolute;
					top: 10rpx;
					line-height: 22rpx;
					right: 8rpx;
					font-size: 22rpx;
					color: #4CBD66;
				}
				text {
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #253C25;
					line-height: 42rpx;
				}
				image {
					margin-top: 8rpx;
				}
				&.cur {
					background-color: #9FEDA7;
					text {
						color: #4CBD66;
					}
				}
			}
			> text {
				width: 94rpx;
				display: inline-block;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 30rpx;
				text-align: center;
				margin-top: 8rpx;
			}
		}
	}
</style>
